<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-text，v-html -->
        <p>{{ msg }}</p>
        <p v-text="msg"></p>
        <p v-html="msg"></p>
        <p>{{ age }}</p>
        <hr>

        <!-- v-on -->
        <button v-on:click="show">按钮1</button>
        <button @click="print(name)">按钮2</button>
        <button @click="print('alice')">按钮3</button>
        <button @click="changeAge()">按钮4</button>
        <button @click="age=30">按钮5</button>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: { // 数据仓库
                msg:'<h3>welcome</h3>',
                name: 'tom',
                age: 18
            },
            methods: { // 方法仓库
                show: function(){
                    console.log(111)
                },
                print(args){
                    console.log(args)
                },
                changeAge(){
                    // console.log(this == vm) // this指向当前Vue实例
                    this.age = 19 // 通过this.变量来访问数据仓库中的属性
                }
            }
        })
    </script>
</body>
</html>